<template>
  <div>
      <div class="com-container">
      <!-- 题目 -->
      <h3 class="title">标题：{{photoinfo.title}}</h3>
      <p><span class="com-time">发表时间:{{photoinfo.add_time}}</span><span class="com-click">点击次数:{{photoinfo.click}}次</span></p>
      <hr>
       <!-- 内容 -->
       <!-- 缩略图 -->
       <div class="thumbs">
         <vue-preview :slides="list" @close="handleClose"></vue-preview>
       </div> 
       <!-- 图片内容 -->
       <div class="content" v-html="photoinfo.content">cxcxc</div>
       <!-- 评论 -->
       <com :id="this.$route.params.id"></com>


  </div>
  </div>
</template>

<script>
// 导入评论子组件
import { Toast } from 'mint-ui';
import comment from '../subcomponents/comment'
export default {
  data(){
    return{
      photoinfo:{},//图片详情
      list:[]///缩略图详情

    }
  },
  components:{
    'com':comment
  },
  created(){
    this.getPhotoInfo()
    this.getPhotoInfoS()

  },
  methods:{
    getPhotoInfo(){
      this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/'+this.$route.params.id).then(res=>{
        if(res.body.status == 0){
          this.photoinfo = res.body.message[0]
        }else{
          Toast('加载失败')

        }
      })
    },
    getPhotoInfoS(){
      this.$http.get("http://www.liulongbin.top:3005/api/getthumimages/"+this.$route.params.id).then(res=>{
        if(res.body.status === 0)
        {
            res.body.message.forEach(element => {
              element.w = 600;
              element.h = 400;
              element.msrc = element.src   ////如果不加   小的缩略图出现不了效果
            });
            this.list = res.body.message
        }
      })
    },
    handleClose(){
      console.log('close event')
    }
  }


}
</script>

<style scoped>
.com-container{
    margin:0 4px; 
}
.title{
    margin: 15px 0;
    text-align: center;
    font-size: 16px;
    color: #226aff;
}
p{
    display: flex;
    justify-content: space-between;
}
span{
    font-size: 13px;
    color: #8f8f94;
}
.thumbs{
  display: flex;
  flex-wrap: wrap;

}
img{
      box-shadow: 0 0 8px #999;
  }


</style>
